<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="已完成订单"></uni-nav-bar>
		<view class="background"></view>
		<view class="content">
			<view class="top">
				<view class="" style="font-size: 26rpx;font-weight: bold;">
					订单信息
				</view>
				<view class="" style="color: red;">
					已完成
				</view>
			</view>
			<view class="">
				<view class="item">
					订单号：
					<span>121212121212</span>
				</view>
				<view class="item">
					服务项目：
					<span>车辆保养</span>
				</view>
				<view class="item">
					服务门店：
					<span>大宝车辆维修店</span>
					<image src="/static/plane@2x.png" mode="" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
					</image>
				</view>
				<view class="item">
					下单时间：
					<span>2023-03-08 17:40</span>
				</view>
				<view class="item">
					预约时间：
					<span>2023-03-09 17:40</span>
				</view>
				<view class="item">
					车辆：
					<span>奔驰FWE4</span><span>/</span><span>豫A00000</span>
				</view>
				<view class="item">
					备注：
					<view class="remark" :class="{ 'expanded': isExpanded }" @click="toggleExpand">
						<span>{{ isExpanded ? remarkContent : (remarkContent.length > 100 ? remarkContent.slice(0, 100) + '...' : remarkContent) }}</span>
					</view>
				</view>
			</view>
			<view class="top">
				<view class="" style="font-size: 26rpx;font-weight: bold;">
					订单详情
				</view>
			</view>
			<view class="order-summary">
				<view class="itemDetail">
					<view class="label">车辆精洗</view>
					<view class="price">¥39.90</view>
				</view>
				<view class="itemDetail">
					<view class="label">车辆附加费用</view>
					<view class="price">0</view>
				</view>
				<view class="divider"></view>
				<view class="itemDetail">
					<view class="label">原价</view>
					<view class="price">¥59.90</view>
				</view>
				<view class="itemDetail">
					<view class="label">店家优惠</view>
					<view class="price-discount">-¥20</view>
				</view>
				<view class="itemDetail">
					<view class="label">优惠券</view>
					<view class="price-discount">-¥10</view>
				</view>
				<view class="divider"></view>
				<view class="item-total">
					<view class="label">支付金额</view>
					<view class="price-total">¥29.9</view>
				</view>
			</view>
			<view class="top">
				<view class="" style="font-size: 26rpx;font-weight: bold;">
					评价结果
				</view>
			</view>
			<view class="itemEvaluate">
				<view class="labelEvaluate">评价时间：</view>
				<view class="valuateTime">2023-04-10 11:09</view>
			</view>
			<view class="itemEvaluate">
				<view class="labelEvaluate">评价结果：</view>
				<view class="stars">
					<view class="star" v-for="(star, index) in 5" :key="index" :class="{ 'active': index < 4 }">★
					</view>
				</view>
			</view>
			<view class="itemEvaluate">
				<view class="labelEvaluate">评语：</view>
				<view class="evaluate">评语评语评语评语评语评语评语评语评语</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				remarkContent: '121212121212121212121212121212121212121212121212121212121212121212121212',
				isExpanded: false
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 150rpx;
	}

	.content {
		top: -130rpx;
		padding: 20rpx;
		position: relative;
		width: 640rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		/* 使子元素两端对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		border-bottom: 8rpx solid #F7F7F7;
		padding-bottom: 20rpx;
	}

	.item {
		margin: 20rpx;
	}

	.remark {
		padding: 10rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
		margin-top: 10rpx;
		white-space: pre-wrap;
		/* 保留空格和换行 */
		word-break: break-all;
		/* 允许长单词换行 */
		cursor: pointer;
	}

	.remark.expanded {
		max-height: none;
	}

	/* 订单详情样式开始 */
	.order-summary {
		background-color: white;
		padding: 20rpx;
	}

	.itemDetail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;
	}

	.label {
		font-size: 28rpx;
	}

	.price {
		font-size: 32rpx;
	}

	.price-discount {
		font-size: 32rpx;
		color: red;
	}

	.item-total {
		display: flex;
		justify-content: space-between;
	}

	.price-total {
		font-size: 36rpx;
		font-weight: bold;
		color: black;
	}

	.divider {
		height: 1rpx;
		background-color: #e0e0e0;
		margin: 10rpx 0;
	}

	.total {
		font-weight: bold;
	}

	/* 订单详情样式结束 */


	/* 评价结果样式开始 */
	.itemEvaluate {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 0 20rpx;
	}

	.labelEvaluate {
		font-size: 26rpx;
	}

	.stars {
		display: flex;
	}

	.star {
		font-size: 32rpx;
		color: #ccc;
		margin-right: 5rpx;
	}

	.star.active {
		color: gold;
	}

	/* 评价结果样式结束 */
</style>